import React from 'react';
import {
  Form,
  Input,
  Button,
  Table,
  Icon,
  Radio,
  InputNumber,
  Checkbox,
  Modal,
  message,
  notification,
  Affix,
  Upload,
  Select
} from 'antd';

import InnerTable from 'components/DBTable/InnerTable.js';
import MessageView from 'components/Bill/messageView.js';
import ajax from '../../../utils/ajax';
const FormItem = Form.Item;
const ButtonGroup = Button.Group;
const Option = Select.Option;

var _this;

/**
 * 内部表格组件
 */
class AccountBillInnerTable extends InnerTable {


  /**
   * 构造器，好像是用来初始化的？
   * @param props
   */
  constructor(props) {
    super(props);

    this.columns = [ { 
  	dataIndex: 'dealNum',
    title: '交易编号',
    dataType: 'varchar',
  },
  {
    dataIndex: 'type',
    title: '交易类型',
    dataType: 'varchar',
  },
  {
    dataIndex: 'name',
    title: '交易名称',
    dataType: 'varchar',
  },
  {
    dataIndex: 'statusName',
    title: '交易状态',
    dataType: 'varchar',
  },
  {
    dataIndex: 'showMoney',
    title: '交易金额',
    dataType: 'varchar',
  },
  {
    dataIndex: 'platform',
    title: '付款方式',
    dataType: 'varchar',
  },
  {
    dataIndex: 'userName',
    title: '场馆',
    dataType: 'varchar',
  },
  {
    dataIndex: 'userNick',
    title: '用户',
    dataType: 'varchar',
  },
  {
    dataIndex: 'createdAt',
    title: '添加时间',
    dataType: 'createTime',
    render: (text, row, index) => {
      return new Date(text).format("yyyy-MM-dd HH:mm:ss");
    }
  },
  {
    dataIndex: 'orderNumber',
    title: '预约编号',
    dataType: 'varchar',
  },
  {
    dataIndex: 'des',
    title: '备注',
    dataType: 'varchar',
  },
  {
    dataIndex: 'status',
    title: '操作',
    dataType: 'int',
    render: (text, record) => {
      if (text == 1 && record.type=='金额提现') {
         return <div> 
                  <span>
                    <a href="javascript:void(0)" onClick={() => this.onDes(text,record)}>修改备注</a>
                  </span>
                  <br/>
                  <span>
                    <a href="javascript:void(0)" onClick={() => this.onExamine(text,record)}>审核</a>
                  </span>
                  <MessageView dn={record.dealNum}/> 
                </div>
      } else if (record.type=='金额提现') {
        return <div> 
                 <span>
                    <a href="javascript:void(0)" onClick={() => this.onDes(text,record)}>修改备注</a>
                  </span>
                  <MessageView dn={record.dealNum}/> 
                </div>
      }else if (text == 1) {
        return <div> 
                  <span>
                    <a href="javascript:void(0)" onClick={() => this.onDes(text,record)}>修改备注</a>
                  </span>
                  <br/>
                  <span>
                    <a href="javascript:void(0)" onClick={() => this.onExamine(text,record)}>审核</a>
                  </span>
                </div>
      } else {
        return <div> 
                  <span>
                    <a href="javascript:void(0)" onClick={() => this.onDes(text,record)}>修改备注</a>
                  </span>
                </div>
      }
    }
  }];
  this.state = {
    desVisible:false,
    dn : '',
    des : '',
    newDes : '',
    examineVisible:false,
    status : -1
   };
  }


  /**
   * 这里好像是用来配置那些按钮之类的
   * @returns {Array}
   */
  prepareToolBar = function () {


  }
onDes = (text,record) =>{
    var _this = this;
    let dn = record.dealNum;
    _this.setState({ dn: dn });
    _this.setState({ des : record.des });
    this.setState({ desVisible: true });
    // ajax.post({
    //       url: "/accountbill/getDes",
    //       params: {dn:dn},
    //       success: function (res) {
    //         _this.setState({des : ''});
    //         _this.setState({ des : res.data });
    //         _this.setState({ desVisible: true });
    //       }
    // })
  }

  desOk = () => {
    var _this = this;
    let dn = _this.state.dn;
    let newDes = _this.state.des;
    const hide = message.loading('');
     ajax.post({
      url: "/accountbill/modifyDes",
      params:{dn : dn, newDes : newDes},
      success: function (res) {
        hide();
        if (res.errorCode == 200) {
          notification.success({
            message: '修改成功',
          });
           _this.props.refresh(); 
           _this.setState({ desVisible: false });
        }else{
          notification.error({
            message: res.moreInfo,
          });
        }
      }
     })
    
  }

  desCancel = () => {
    this.setState({ desVisible: false });
  }

  getInputValue= (e) =>{
    var _this = this;
    _this.setState({des : e.target.value});
  }

  onExamine = (text,record) => {
    var _this = this;
    let dn = record.dealNum;
    _this.setState({ dn: dn });
    _this.setState({ examineVisible: true });
    
  }

  examineOk = () => {
    var _this = this;
    let dn = _this.state.dn;
    let status = _this.state.status;
    const hide = message.loading('');
     ajax.post({
      url: "/accountbill/modifyStatus",
      params:{dn : dn, status : status},
      success: function (res) {
        hide();
        if (res.errorCode == 200) {
          notification.success({
            message: '审核成功',
          });
           _this.props.refresh(); 
           _this.setState({ examineVisible: false });
        }else{
          notification.error({
            message: res.moreInfo,
          });
        }
      }
     })
  }

  examineCancel = () => {
    this.setState({ examineVisible: false });
  }

   getSelectValue = (value) => {
      var _this = this;
      _this.setState({status: value});
  }
  

  /**
   * 请求之前，先处理数据
   * @param obj
   * @returns {*}
   */
  handleData = (data) => {

  }
  getDataSource = () => {
     if(this.props.data){
      return this.props.data;
     }
  }
  render() {
    const columns = this.columns;
    return (
      <div className="userList">
        <Table columns={columns} dataSource={this.getDataSource()} pagination={false}/>
        <Modal title="修改备注" visible={this.state.desVisible} onOk={this.desOk}
          onCancel={this.desCancel}>
          <textarea className="noteTextArea" maxLength="120" onChange =  {this.getInputValue} placeholder='请输入备注'style={{height:80, width:490}} value = {this.state.des}/> 
        </Modal>

        <Modal title="审核" visible={this.state.examineVisible} onOk={this.examineOk}
          onCancel={this.examineCancel}>
          <div>请选择</div>
          <Select
            style={{ width: 200 }}
            placeholder="请选择"
            onChange={this.getSelectValue}
          >
            <Option value="0">不通过</Option>
            <Option value="1">通过</Option>
          </Select>
        </Modal>
      </div>
    )
  }


}

export default AccountBillInnerTable;
